import {Box, Card, CardActionArea, CardContent, CardProps, styled} from "@mui/material";
import DGTextView from "./DGTextView.tsx";
import {CSSProperties, FC, ReactNode} from "react";
import DGGrowView from "./DGGrowView.tsx";

interface MyDGCardViewProps extends CardProps {
    NoBackground?: boolean
}

const MyDGCardView = styled(Card, {
    shouldForwardProp: (prop) => prop !== 'NoBackground'
})<MyDGCardViewProps>(({theme, NoBackground}) => {
    const mode = theme.palette.mode === "light";
    return {
        "&": {
            boxShadow: "none !important", backgroundImage: "none !important",
            backgroundColor: NoBackground ? "transparent !important" : mode ? "#EDEDED !important" : "#EDEDED11 !important",
        },
    }
});


interface DGCardProps extends CardProps {
    children?: ReactNode,
    NoBackground?: boolean,
    title?: string,
    ripple?: boolean,
    item?: boolean,
    small?: boolean,
    action?: ReactNode,
    time?: number,
    animation?: boolean,
    subTitle?: string,
    Margin?: string
}


const DGCardView: FC<DGCardProps> = (
    {
        children,
        NoBackground,
        title,
        ripple,
        item,
        small,
        action,
        time,
        animation,
        subTitle,
        Margin,
        ...other
    }) => {

    // children 子节点
    // className CSS类名
    // ripple 是否设置波纹
    // title 标题内容
    // item 表示 children 不属于纯文字节点，如按钮，列表等
    // small 是否设置为小标题大小
    // action 标题右侧的操作节点
    // ...props 其他或追加属性
    // 样式变量
    const CardContentStyle: CSSProperties = {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between"
    };


    // ContentView DOM 节点
    const ContentView = (<MyDGCardView NoBackground={NoBackground} {...other}>
        {/* 卡片组件 */}
        {ripple && <CardActionArea>
            <CardContent style={item ? CardContentStyle : undefined}>
                <Box>
                    {/* 加粗标题（默认） */}
                    {title && !small && <DGTextView Title Padding={!item && !item} Bold>{title}</DGTextView>}
                    {/* 不加粗标题 */}
                    {title && small && <DGTextView Title Padding={!item && !item}>{title}</DGTextView>}
                    {/* 副标题 */}
                    {subTitle && <DGTextView Body Bold>{subTitle}</DGTextView>}
                </Box>
                {/* 显示操作节点 */}
                {action && action}
                {/* 显示纯文本节点 */}
                {!item && children && <DGTextView variant="body1">{children}</DGTextView>}
            </CardContent>
        </CardActionArea>}


        {!ripple && <CardContent style={item ? CardContentStyle : undefined}>
            <Box>
                {/* 加粗标题（默认） */}
                {title && !small && <DGTextView Title Padding={!item && !item} Bold>{title}</DGTextView>}
                {/* 不加粗标题 */}
                {title && small && <DGTextView Title Padding={!item && !item}>{title}</DGTextView>}
                {/* 副标题 */}
                {subTitle && <DGTextView Body Bold>{subTitle}</DGTextView>}
            </Box>
            {/* 显示操作节点 */}
            {action && action}
            {/* 显示纯文本节点 */}
            {!item && children && <DGTextView variant="body1">{children}</DGTextView>}
        </CardContent>}
        {/* 显示非纯文本节点 */}
        {item && children && children}
    </MyDGCardView>);


    return (<Box style={{margin: Margin}}>
        {animation ? <DGGrowView time={time}>{ContentView}</DGGrowView> : <>{ContentView}</>}
    </Box>);
}
export default DGCardView;